/**
 * 函数组件中，使用 Context
 *
 *    1. 与类组件基本一致。只是无法通过 contextType 来设置。
 *        因为函数组件没有 this
 *    2. 通过 Provider + Consumer 的方式玩
 */

import React from "react";

// 创建 context 对象
const MyContext = React.createContext();

// Hello 组件
function Hello() {
  return (
    <MyContext.Consumer>
      {(value) => {
        return (
          <div>
            <h4>Hello - {value.name}</h4>
            <button onClick={value.fn}>点我</button>
          </div>
        );
      }}
    </MyContext.Consumer>
  );
}
// Hello.contextType = MyContext;

// App 组件
class App extends React.Component {
  state = {
    name: "张三",
  };

  changeName = () => {
    console.log("changeName");
    this.setState({
      name: this.state.name + "~",
    });
  };

  render() {
    return (
      <MyContext.Provider
        value={{ name: this.state.name, fn: this.changeName }}
      >
        <div>
          <h1>App</h1>
          <hr />
          <Hello />
        </div>
      </MyContext.Provider>
    );
  }
}

export default App;
